<%@ include file="/taglibs.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<fmt:message key="date.format" var="df" scope="page"/>
<head>
	<title><fmt:message key="reportByDepartment.form.title"/></title>
	
</head>



<s:set name="files" value="files" scope="request"/>
<s:form name="searchByDepartmentForm" action="reportByDepartment" method="post" validate="true">
<s:select key="reportByDepartment.form.department" name="departmentId" cssStyle="max-width: 500px !important;" list="departments" listKey="id" listValue="name" ></s:select>
<s:select key="file.category" name="cateId" list="categories" cssStyle="max-width: 500px !important;" listKey="value" listValue="name" headerKey="%{getText('select.default.key')}" headerValue="%{getText('select.default.value')}"></s:select>
<table class="table">

<tr>
	<td width="120px">
        <input type="radio" id="overtime" value="1" <c:if test="${reportType == '1' || reportType == null}">checked="checked"</c:if> name="reportType">&nbsp;<s:property value="getText('reportByDepartment.form.reporttype.overtime')"/>
    </td>
    <td width="250px">
         <select id="select_overtime" name="select_overtime" <c:if test="${reportType == '2'}">style="display: none"</c:if>>
			  <option value="11" <c:if test="${select_overtime == '11'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.overtime.ontime')"/></option>
			  <option value="12" <c:if test="${select_overtime == '12'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.overtime.overtime')"/></option>
			  <option value="13" <c:if test="${select_overtime == '13'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.overtime.less5')"/></option>
			  <option value="14" <c:if test="${select_overtime == '14'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.overtime.5to10')"/></option>
			  <option value="15" <c:if test="${select_overtime == '15'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.overtime.10to20')"/></option>
			  <option value="16" <c:if test="${select_overtime == '16'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.overtime.more20')"/></option>
		</select> 
    </td> 
	<td width="120px">
        <input type="radio" id="notapprove" value="2" <c:if test="${reportType == '2'}">checked="checked"</c:if> name="reportType">&nbsp;<s:property value="getText('reportByDepartment.form.reporttype.notapprove')"/>
    </td>
    <td>
    	<select id="select_notapprove" name="select_notapprove" <c:if test="${reportType == '1' || reportType == null}">style="display: none"</c:if>>
			  <option value="21" <c:if test="${select_notapprove == '21'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.notapprove.notYetExpiration')"/></option>
			  <option value="22" <c:if test="${select_notapprove == '22'}">selected="selected"</c:if>><s:property value="getText('reportByDepartment.form.reporttype.notapprove.expiration')"/></option>
		</select>
    </td>
</tr>
<tr>
	<td>
        <s:property value="getText('report.fromdate')"/>
    </td>
    <td>
        <s:textfield id="fromDate" readonly="true" name="fromDate" size="11" theme="simple" required="true"/>
    </td>
	<td>
        <s:property value="getText('report.todate')"/>
    </td>
    <td>
        <s:textfield id="toDate" name="toDate" readonly="true" size="11" theme="simple" required="true"/>
    </td>     
</tr>   
	<tr>
		<td colspan="4">
		<s:url action="exportReport" var="exportReportURL">
			<s:param name="reportType" value="%{reportType}"></s:param>
		</s:url>
		
		<button type="submit" onclick="this.blur()" class="button"
						name="reportOnTime">
						<fmt:message key="button.execute.title"></fmt:message>
						<img src="${ctx}/images/report.png" align="left" height="20"
							width="20"></button>
		</td>
	</tr>
   </table>

</s:form>



<div align="right">
			<c:if test="${fn:length(files) != 0}">
				<s:url action="exportDocFile!exportLstFiles.html" var="exportVoucherURL"></s:url>
					<s:a href="%{exportVoucherURL}">
						<img src="${ctx}/images/export_word.png">
					</s:a>
			</c:if>
		</div>
<s:set var="item_name" value="%{getText('file.item_name')}" scope="page"></s:set>
<s:set var="items_name" value="%{getText('file.items_name')}" scope="page"></s:set>

<s:iterator var="fileList" value="files" >
	<display:table  name="fileList.lstFile" class="table" requestURI="" id="fileDetail" export="false" pagesize="10" >
		 <display:caption><strong><s:property value="#fileList.department"/></strong></display:caption>
		<display:setProperty name="paging.banner.item_name" value="${item_name}"/>
		<display:setProperty name="paging.banner.items_name" value="${items_name}"/>
	    <display:column property="submiter" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.groupname" ></display:column>
	    <display:column property="category" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.category"  ></display:column>
	    <display:column property="inputDate" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.inputdate"  >
	    </display:column>
	    <display:column property="outputDate" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.outdate"  >
	    </display:column>
	    <display:column property="result" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.status"  >
	    </display:column>
	</display:table>
</s:iterator>

<c:if test="${fn:length(files) == 0}">
	<display:table  name="fileList.lstFile" class="table" requestURI="" id="fileDetail" export="false" pagesize="10" >
		<display:setProperty name="paging.banner.item_name" value="${item_name}"/>
		<display:setProperty name="paging.banner.items_name" value="${items_name}"/>
	    <display:column property="submiter" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.groupname" ></display:column>
	    <display:column property="category.shortName" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.category"  ></display:column>
	    <display:column property="inputDate" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.inputdate"  >
	    </display:column>
	    <display:column property="outputDate" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.outdate"  >
	    </display:column>
	    <display:column property="result" sortable="false" media="html" titleKey="reportByDepartment.form.table.header.status"  >
	    </display:column>
	</display:table>
</c:if>


<c:if test="${fn:length(fileList.lstFile) gt 0}">
	<s:url action="exportDocFile!exportLstFiles.html" var="exportVoucherURL"></s:url>
		<s:a href="%{exportVoucherURL}">
			<img src="${ctx}/images/export_word.png">
		</s:a>
</c:if>

<script type="text/javascript">
	$(document).ready(function() {
		$('select[name="departmentId"]').change(function(){
			if ($(this).val() != "0") {
				$.blockUI({ message: ajaxAnimation }); 
				$.ajax({
				  url: 'searchCatByDeptId.html',
				  data : {'departmentId' : $(this).val()},
				  dataType : 'json',
				  success: function(data) {
					  	var catHtml = "";
						$.each(data.categories, function() {
							catHtml += '<option value="' + this.value + '">' + this.name + '</option>';
						});	
						$('select[name="cateId"]').html($('select[name="cateId"] :first').clone().wrap('<div>').parent().html() + catHtml);										
				  }
				});
			}else{
				$('select[name="cateId"]').html($('select[name="cateId"] :first').clone().wrap('<div>').parent().html());			
			}
		});
	});
		
		var cal = Calendar.setup({
	          onSelect: function(cal) { cal.hide();},
	      });
	      cal.manageFields("fromDate","fromDate","%d/%m/%Y");
	      cal.manageFields("toDate","toDate","%d/%m/%Y");

	      
	      	$('#notapprove').click(function(){
	      		$('#select_overtime').hide();
	      		$('#select_notapprove').show();
	  		});
	  		
	      	$('#overtime').click(
	      			function(){
			      		$('#select_overtime').show();
			      		$('#select_notapprove').hide();
	  				}
	      			);
	      	
	      	$(document).ready(function (){
	      		var currentTime = new Date();
	      		var month = currentTime.getMonth() + 1;
	      		var day = currentTime.getDate();
	      		if(month < 10) month = "0" + month;
	      		if(day < 10) day = "0" + day;
	      		var year = currentTime.getFullYear();
	      		
	      		var today = day + "/" + month + "/" + year;
	      		
	      		if($("#fromDate").val()=="")
	      	  		$("#fromDate").val(today);
	      		
	      		if($("#toDate").val()=="")
	      	  		$("#toDate").val(today);
	      	});
	</script>